<template>
	<view class="shopIn-wrap page-bg">
		<image class="header-bg" src="../../static/item_09.png"></image>
		<view class="form-wrap">
			<view class="form-group">
				<view class="form-group__title">商铺名称</view>
				<view class="form-group__con">
					<input class="form-group__from " type="text" placeholder="请输入商铺名称" placeholder-class="placeholder" />
				</view>
			</view>
			<view class="form-group">
				<view class="form-group__title">经营类型</view>
				<view class="form-group__con">
					<picker class="form-group__from link" mode="selector" :range="range" @change="pickerChange">
						<view class="picker-res">{{pickerRes}}</view>
					</picker>
				</view>
			</view>
			<view class="form-group">
				<view class="form-group__title">店铺详细地址</view>
				<view class="form-group__con">
					<input class="form-group__from " type="text" placeholder="请输入详细地址" placeholder-class="placeholder" />
				</view>
			</view>
			<view class="form-group form-group__text">
				<textarea class="form-group__from" value="" placeholder="请简单的介绍下你的店铺" placeholder-class="placeholder" />
			</view>
		</view>
				
		<view class="interval"></view>
				
				<view class="form-wrap">
					<view class="form-group">
						<view class="form-group__title">联系人</view>
						<view class="form-group__con">
							<input class="form-group__from " type="text" placeholder="请输入联系人" placeholder-class="placeholder" />
						</view>
					</view>
					<view class="form-group">
						<view class="form-group__title">手机号</view>
						<view class="form-group__con">
							<input class="form-group__from " type="text" placeholder="请输入手机号" placeholder-class="placeholder" />
						</view>
					</view>
					<view class="form-group">
						<view class="form-group__title">邮箱</view>
						<view class="form-group__con">
							<input class="form-group__from " type="text" placeholder="请输入邮箱" placeholder-class="placeholder" />
						</view>
					</view>
					
					<view class="form-group form-group__upload">
						<view class="form-group__title">请上传身份证</view>
						<view class="form-group__con">
							<view class="upload-item">
								<image class="upload-img" src="" ></image>
								<view class="uplaod-tip">身份证正面</view>
							</view>
							<view class="upload-item">
								<image class="upload-img" src="" ></image>
								<view class="uplaod-tip">身份证反面</view>
							</view>
						</view>
					</view>
					
					<view class="form-group form-group__upload">
						<view class="form-group__title">请上传营业执照</view>
						<view class="form-group__con">
							<view class="upload-item">
								<image class="upload-img" src="" ></image>
								<view class="uplaod-tip">营业执照</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="interval"></view>
				
				
		<view class="user-agreel">
			<image class="agreel-icon" src="../../static/common/icon_07_on.png" @click="changeAgreel" v-if='isAgreel'></image>
			<image class="agreel-icon" src="../../static/common/icon_07.png" @click="changeAgreel" v-else></image>
			<view class="agreel-title">我已阅读并了解 <text class="agreel-con" @click="popCenterClose">《商家入驻协议》</text> </view>
		</view>	
		
		<popCenter :isShow='isShow' @popCenterClose='popCenterClose'></popCenter>
		
		<view class="footer-block"></view>
		
		<view class="page-submit" @click="link('/pages/shop/shopInRes')">立即申请入驻</view>
		
	</view>
</template>

<script>
	import userAgreel from '../../components/userAgreel.vue'
	import popCenter from '../../components/popCenter.vue'
	
	export default{
		data() {
			return{
				isAgreel: false,
				isShow: false,
				range: [],
				pickerRes: ''
			}
		},
		methods:{
			changeAgreel(res) {
				this.isAgreel = !this.isAgreel
			},
			popCenterClose(status) {
				console.log('点击阅读')
				this.isShow = status
			},
			link(url) {
				this.$link(url)
			}
		},
		components:{
			userAgreel,
			popCenter
		}
	}
</script>

<style scoped lang="less">
@import url('../../app.less');
	.header-bg{
		width: 100%;
		height: 300upx;
		display: block;
	}
	
	.user-agreel{
		padding: 50upx 20upx ;
		box-sizing: border-box;
		.flex-base;
		justify-content: flex-start;
		.agreel-icon{
			width: 30upx;
			height: 30upx;
		}
		.agreel-title{
			.f22;
			margin-left: 10upx;
		}
		.agreel-con{
			color: @font-orange-color;
		}
	}
	
</style>
